<template>
  <div style="margin-bottom: 100px">
    <div style="margin: 20px 0">
      <span style="font-size: 20px; color: #333">{{ exam.name }}</span>
      <span style="font-size: 14px; color: #333; margin-left: 20px">Start Time: {{ exam.time }}</span>
      <span style="font-size: 14px; color: #333; margin-left: 20px">Duration: {{ exam.duration }} min</span>
      <span style="font-size: 14px; color: #333; margin-left: 20px">Classroom: {{ exam.room }}</span>
    </div>

    <el-row :gutter="20">
      <el-col :span="16">
        <div style="border: 1px solid #ccc; padding: 10px; border-radius: 10px; margin: 10px 0;">
          <el-scrollbar height="10px">
            <div v-for="(item, index) in questiones" :key="item.id"  style="margin: 20px 0">
              <div style="margin: 10px 0; font-size: 20px"><span>{{ index+1 }}.</span> {{ item.name }}
                <span style="font-size: 14px" v-if="item.type === 1"> (Choice)</span>
                <span style="font-size: 14px"  v-if="item.type === 2"> (True/False)</span>
                <span style="font-size: 14px"  v-if="item.type === 3"> (Essay)</span>
              </div>
              <div v-if="item.type === 1" style="margin: 10px">
                <span style="margin-right: 20px"><el-radio v-model="item['studentAnswer']" label="A">A. {{ item.a }}</el-radio></span>
                <span  style="margin-right: 20px"><el-radio v-model="item['studentAnswer']" label="B">B. {{ item.b }}</el-radio></span>
                <span  style="margin-right: 20px"><el-radio v-model="item['studentAnswer']" label="C">C. {{ item.c }}</el-radio></span>
                <span  style="margin-right: 20px"><el-radio v-model="item['studentAnswer']" label="D">D. {{ item.d }}</el-radio></span>
              </div>
              <div v-if="item.type === 2" style="margin: 10px">
                <span style="margin-right: 20px"><el-radio v-model="item['studentAnswer']" label="True">True</el-radio></span>
                <span  style="margin-right: 20px"><el-radio v-model="item['studentAnswer']" label="False">False</el-radio></span>
              </div>
              <div v-if="item.type === 3" style="margin: 10px">
                <el-input type="textarea" v-model="item['studentAnswer']"></el-input>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </el-col>

      <el-col :span="8">
        <face-detect @submit="submitPaper"></face-detect>
        <div style="margin: 20px; text-align: center">
          <el-button size="medium" type="primary" @click="submitPaper">Submit Exam</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FaceDetect from "@/views/front/FaceDetect.vue";

export default {
  name: "Paper",
  components: {
    FaceDetect
  },
  data() {
    return {
      questiones: [],
      examId: this.$route.query.examId,
      exam: {}
    }
  },
  created() {
    this.request.get("/exam/" + this.examId).then(res => {
      this.exam = res.data
    })

    this.request.get("/examPaper/exam/" + this.examId).then(res => {  // 根据考试id查询试卷id
      if (res.data) {
        this.request.get("/paper/view/" + res.data.paperId).then(res => {  // 根据试卷id查询所有试题
          this.questiones = res.data
        })
      }
    })
  },
  methods: {
    submitPaper() {
      this.request.post("/studentpaper", {examId: this.examId, paper: JSON.stringify(this.questiones)}).then(res => {
        if (res.code === '200') {
          this.$router.push('/front/home')
          this.$message.success("提交成功！")
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>